﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/moniter.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script>
    <style>
        .pop-txt{padding: 2px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            position: absolute;
            right: 0;
            top: 61%;
            width: 100%;
            z-index: 99;
            text-align: center;}
        .p-r-10 {
            padding-right: 10px;
        }
        .txt-limit {
            height: 30px;
            overflow: hidden;
            display: block;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%!important;
            overflow: hidden;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            color:#333;
        }
        @media(max-width:1366px) {
            .txt-num {
                position: absolute;
                left: 137px;
                top: 10px;
                width: 58px;
            }
        }
        .table tbody td:last-child {
            text-align: left;
            padding-right: 8px!important;
        }
        .table {
            word-wrap: break-word;
            word-break: break-all;
            table-layout: fixed;
        }
        .table-ljj{height:100%;overflow:auto;}
.table01-lj table thead, .table01-lj tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    height: 35px;
}
.table th, .table td {
    padding: 2px;
}
.table01-lj table tbody {
    height: 106px;
}
.table01-lj {
    height: 142px;
}
.map-b-div {
    height: 193px;
}
.map-t-div {
    padding-bottom: 198px;
}
.padding-not{padding-top:0!important;}
    </style>
    <title>容智车联车厢管家</title>
</head>
<body class="odd-body">
<div class="container-fluid" style="padding:0">
    <div class="row-fluid">
        <div class="span3 pad-10 bg-white bdradius pos-re side-list" style="width: 20%">
            <div id="side-list" class="height100 pos-re">
                <div class="search-lj" style="overflow:hidden;" >
                    <form class="navbar-search">
                        <input type="text" class="search-query input-medium m-l-25" placeholder="搜索中转站" id="searchStation"/>
                    </form>
                </div>
                <div class="ul-lj">
                    <ul id="vehi-list">
                    <#--<li class=" p-bt-10 b-botom pos-re">
                        <a class="txt-limit" style="font-size: 10px;" title="北京顺义中转站北京顺义中转站北京顺义中转站">北京顺义中转站北京顺义中转站北京顺义中转站</a>
                        <span class="txt-num">（88辆）</span>
                        <ul>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                        </ul>
                    </li>-->
                    <#list stationList as station>
                        <li class=" p-bt-10 b-botom pos-re">
                            <a href="javascript:void(0);" title='${station.name!""}（${station.carCount!""}辆）'>
                                <span class="txt-limit getCars" id="${station.name!""}" name="${station.id!""}">${station.name!""}（${station.carCount!""}辆）</span>
                            </a>
                            <span class="txt-num"></span>
                            <ul class="carListNumbers">
                            <#--<li class=" p-bt-10">粤B3959457</li>
                                <li class=" p-bt-10">粤B3959457</li>
                                <li class=" p-bt-10">粤B3959457</li>
                                <li class=" p-bt-10">粤B3959457</li>
                                <li class=" p-bt-10">粤B3959457</li>-->
                            </ul>
                        </li>
                    </#list>

                    <#--<li class=" p-bt-10 b-botom pos-re">
                        <span class="txt-limit">深圳黄田中转站</span>
                        <span class="txt-num">（37辆）</span>
                        <ul class="dis-no">
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                        </ul>
                    </li>
                    <li class=" p-bt-10 b-botom pos-re">
                        <span class="txt-limit">广州白云中转站</span>
                        <span class="txt-num">（65辆）</span>
                        <ul class="dis-no">
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                        </ul>
                    </li>
                    <li class=" p-bt-10 b-botom pos-re">
                        <span class="txt-limit">北京顺义中转站</span>
                        <span class="txt-num">（88辆）</span>
                        <ul class="dis-no">
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                        </ul>
                    </li>
                    <li class=" p-bt-10 b-botom pos-re">
                        <span class="txt-limit">北京顺义中转站</span>
                        <span class="txt-num">（88辆）</span>
                        <ul class="dis-no">
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                        </ul>
                    </li>
                    <li class=" p-bt-10 b-botom pos-re">
                        <span class="txt-limit">北京顺义中转站</span>
                        <span class="txt-num">（88辆）</span>
                        <ul class="dis-no">
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                        </ul>
                    </li>
                    <li class=" p-bt-10 b-botom pos-re">
                        <span class="txt-limit">北京顺义中转站</span>
                        <span class="txt-num">（88辆）</span>
                        <ul class="dis-no">
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                        </ul>
                    </li>
                    <li class=" p-bt-10 b-botom pos-re">
                        <span class="txt-limit">北京顺义中转站</span>
                        <span class="txt-num">（88辆）</span>
                        <ul class="dis-no">
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                        </ul>
                    </li>
                    <li class=" p-bt-10 b-botom pos-re">
                        <span class="txt-limit">北京顺义中转站</span>
                        <span class="txt-num">（88辆）</span>
                        <ul class="dis-no">
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                            <li class=" p-bt-10">粤B3959457</li>
                        </ul>
                    </li>-->
                    </ul>
                </div>
            </div>
        </div>
        <!--------------------------以下是右边路况图---------------------------------->
        <div class="span9 pull-right  pos-re lijia-div">
            <div class="width100 pos-re height100">
                <div class="map-t-div pos-re height100">
                    <div class="lj-div row-fluid">
                        <div class="span4" id="stationName"><span class="red bold">监控场站：</span></div>
                        <div class="span4"><span class="red bold">在途车辆：</span><span id="carnum">0辆</span></div>
                        <div class="span4">
                            <span class="float-l"><span class="red bold">时间：</span><span class="timetime"></span></span>
                            <span class="float-r fullScreen screenbtn"></span>
                        </div>
                    </div>
                    <div class="map-div">
                        <div class="map-zone bdbox bdradius ov-h pos-re" id="allmap">
                        <#--<div class=" map-titl p-l-20 bdbox pos-ab2">-->
                        <#--<div class="span4">场站监控 :&nbsp;&nbsp;<span>北京顺义中转站</span></div>-->
                        <#--<div class="span4 text-center">在途车辆 :&nbsp;&nbsp;<span>6辆</span></div>-->
                        <#--<div class="span4 text-right p-r-10">时间 :&nbsp;&nbsp;<span>2017/6/15&nbsp;&nbsp;08:33:45</span></div>-->
                        <#--</div>-->
                            <!---------这里安排地图------------>
                        </div>
                    </div>
                </div>
                <div class="row-fluid map-b-div">
                    <div class="span6 bg-white pad-10 bdradius  padding-not">

                        <div class=" height100 pos-re">
                            <h3 class="b-botom pos-ab divtable01-lj padding-not">卡车出入港信息</h3>
                            <div class=" table01-lj">
                                <div class=" table-ljj">
                                    <table class="table table-striped table-hover" id="carInfo">
                                        <thead class="font-bold four-border">
                                        <tr>
                                            <td>车牌号</td>
                                            <td>状态</td>
                                            <td>到达场站</td>
                                            <td>出入港时间</td>
                                        </tr>
                                        </thead>
                                            <#--<tr>
                                                <td>
                                                    <span class="txt-limit" title="京B33650">京B33650</span>
                                                </td>
                                                <td>
                                                    <span class="txt-limit" title="06:18:22">06:18:22</span>
                                                </td>
                                                <td><span class="txt-limit" title="南法信分拣中心">南法信分拣中心</span></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="txt-limit" title="京B33650">京B33650</span>
                                                </td>
                                                <td>
                                                    <span class="txt-limit" title="06:18:22">06:18:22</span>
                                                </td>
                                                <td><span class="txt-limit" title="南法信分拣中心">南法信分拣中心</span></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="txt-limit" title="京B33650">京B33650</span>
                                                </td>
                                                <td>
                                                    <span class="txt-limit" title="06:18:22">06:18:22</span>
                                                </td>
                                                <td><span class="txt-limit" title="南法信分拣中心">南法信分拣中心</span></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="txt-limit" title="京B33650">京B33650</span>
                                                </td>
                                                <td>
                                                    <span class="txt-limit" title="06:18:22">06:18:22</span>
                                                </td>
                                                <td><span class="txt-limit" title="南法信分拣中心">南法信分拣中心</span></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="txt-limit" title="京B33629">京B33629</span>
                                                </td>
                                                <td>
                                                    <span class="txt-limit" title="07:35:36">07:35:36</span>
                                                </td>
                                                <td><span class="txt-limit" title="四季青分拣中心">四季青分拣中心</span></td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="txt-limit" title="京B77288">京B77288</span>
                                                </td>
                                                <td>
                                                    <span class="txt-limit" title="07:58:41">07:58:41</span>
                                                </td>
                                                <td><span class="txt-limit">天津机场集散中心</span></td>
                                                <td></td>
                                            </tr>-->

                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span6  bg-white p-l-10 p-t-10 p-r-10 bdradius height100 padding-not" style="float: right;">

                        <div class=" height100 pos-re">
                            <h3 class="b-botom pos-ab divtable01-lj">异常开关门信息</h3>
                            <div class=" table01-lj">
                                <table class="table table-striped  table-lj  table-hover">
                                    <thead class="font-bold four-border">
                                    <tr><td width="20%">
                                        车牌号
                                    </td>
                                        <td width="20%">
                                            状态
                                        </td>
                                        <td width="30%">
                                            开/关门地点
                                        </td>
                                        <td width="30%">
                                            开/关门时间
                                        </td>
                                    </tr>
                                    </thead>
                                    <tbody id="openInfo">
                                        <#--<tr>
                                            <td  width="20%">
                                                <span class="txt-limit" title="京B28549">京B28549</span>
                                            </td>
                                            <td width="20%">
                                                <span class="txt-limit" title="开门">开门</span>
                                            </td>
                                            <td width="30%">
                                                <span class="txt-limit" title="北京顺义区货运路飞行总队迎宾桥南">北京顺义区货运路飞行总队迎宾桥南</span>
                                            </td>
                                            <td width="30%">
                                                <span class="txt-limit" title="07:58:41">07:58:41</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td  width="20%">
                                                <span class="txt-limit" title="京B28549">京B28549</span>
                                            </td>
                                            <td width="20%">
                                                <span class="txt-limit" title="关门">关门</span>
                                            </td>
                                            <td width="30%">
                                                <span class="txt-limit" title="北京市顺义区货运路飞行总队尹斌桥南">北京市顺义区货运路飞行总队尹斌桥南</span></span>
                                            </td>
                                            <td width="30%">
                                                <span class="txt-limit" title="07:59:56">07:59:56</span>
                                            </td>
                                        </tr>-->

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/moniter.js"></script>
<script src="../static/js/task.js"></script>
<script src="../static/js/station/stationControl.js"></script>

<script>
    $(function () {
        //获取当前时间
        function time(){
            var date = new Date();
            var n = date.getFullYear();
            var y = date.getMonth()+1;
            var t = date.getDate();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            var time = (h<10?'0':'')+h+':'+(m<10?'0':'')+m+':'+(s<10?'0':'')+s;
            var output = n+'/'+(y<10?'0':'')+y+'/'+(t<10?'0':'')+t+' '+time;
            $('.timetime').html(output);
        }
        time();
        setInterval(time,1000);
        //通过场站id查询车辆列表
//        $('.getCars').click(function () {
        $(document).on('click','.getCars',function(){
            var stationId = $(this).attr('name');
            var name = $(this).attr('id');
            $("#stationName").html("<span class='red bold'>监控场站：</span>"+name)
//            alert(stationId);
            $.ajax({
                type: "POST",
                url: "../car/getCarListByStationId",
                dataType:'json',
                data:{
                    "stationId":stationId
                },
                success:function(data){
                    if(data.status == "success")
                    {
                        var carString = data.msg;
//                        alert(carString);
                        $('.carListNumbers').html(carString);
                    }
                    else {
//                        alert(1111);
                    }
                }
            });


            //第二功能，获取卡车入港信息，异常开关门信息
            $.ajax({
                type: "POST",
                url: "../car/getCarInInfoByStationId",
                dataType:'json',
                data:{
                    "stationId":stationId
                },
                success:function(data){
                    /*if(data.status == "success")
                    {
                        var carInfo = data.msg;
                        $('#carInfo').html(carInfo);
                    }
                    else {
//                        alert(1111);
                    }*/
                    var carInfo = data.msg;
//                    alert(carInfo);
                    $('#carInfo').html(carInfo);
                }
            });


            //第三功能，获取异常开关门信息
            $.ajax({
                type: "POST",
                url: "../car/getCarOpenInfoByStationId",
                dataType:'json',
                data:{
                    "stationId":stationId
                },
                success:function(data){
                    /*if(data.status == "success")
                    {
                        var openInfo = data.msg;
                        alert(openInfo);
//                        alert(carString);
                        $('#openInfo').html(openInfo);
                    }
                    else {
//                        alert(1111);
                    }*/
                var openInfo = data.msg;
//            alert(openInfo);
//                        alert(carString);
                $('#openInfo').html(openInfo);
                }
            });

        });


        /**
         * 搜索触发事件
         */
        $("#searchStation").keyup(function(){
            var text = $(this).val();
//            alert(text);
            $.ajax({
                type: "POST",
                url: "../station/getStationByKey",
                dataType:'json',
                data:{
                    "text":text
                },
                success:function(data){
                    if(data.status == "success")
                    {

                        var str = data.stationList;
                        $('#vehi-list').html(str);
                    }
                    else {
//                        alert(1111);
                    }
                }
            });
        });

    });

</script>
</body>
</html>
